<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<title>数据分析</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- css -->
<link href="../static/css/bootstrap-responsive.css" rel="stylesheet">
<link href="../static/css/style.css" rel="stylesheet">
<!-- skin color -->
<link href="../static/color/default.css" rel="stylesheet">
<!--[if lt IE 7]>
	<link href="css/font-awesome-ie7.css" type="text/css" rel="stylesheet">  
<![endif]-->
<link rel="shortcut icon" href="../static/img/favicon.ico">
<style type="text/css">
    .con-form{
        border: solid 0.3rem #0E5F76;
        margin-top: 30px;
        margin-left: 5px;
    }
    #main{
        margin-top: 25px;
    }
    .res{
        padding-left: 10%;
    }
</style>
</head>
<body>
<!-- navbar -->
<div class="navbar-wrapper">
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<!-- Responsive navbar -->
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
				</a>
				<h1 class="brand"><a href="index.html" tppabs="#">DataAnalysis</a></h1>
				<!-- navigation -->
				<nav class="pull-right nav-collapse collapse">
				<ul id="menu-main" class="nav">
                    <li><a title="team" href="/index.html">主页</a></li>
                    <li><a title="services" href="/analysis.html">数据分析</a></li>
                    <li><a title="works" href="/blog/category/应用案例">案例系统</a></li>
                    <li><a title="blog" href="/blog/category/代码开源">开源论坛</a></li>
                    <li><a title="contact" href="/help.html">帮助中心</a></li>
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="#"><span class="glyphicon glyphicon-user"></span>{{ user }}</label></a></li>
                    </ul>
                </ul>
				</nav>
			</div>
		</div>
	</div>
</div>

<!--图表展示-->
<div class="row">
<!--数据输入处-->
	<div class="span3">
		<form class="bs-example bs-example-form con-form" role="form" method="post" enctype="multipart/form-data">
        {% csrf_token %}
		<h3>输入数据</h3>
		<br>
        <div class="input-group" id="increase_data">
            <span class="input-group-addon">x轴数据</span>
            <input type="text" class="form-control" placeholder="请用英文逗号分隔" name="x" value="{{x}}" >
        </div>
        <div class="input-group" id="increase_mark" >
            <span class="input-group-addon">y轴数据</span>
            <input type="text" class="form-control" placeholder="请用英文逗号分隔" name="y" value="{{y}}">
        </div>
        <hr>
        <h3>或选择文件上传</h3>
        <br>
        <div class="input-group" id="increase_data">
            <input type="file" name="csv"> 
        </div>
        <hr>
        <div class="input-group">
            <span class="input-group-addon">标题</span>
            <input type="text" class="form-control" placeholder="请使用英文输入" name="title" value="{{title}}" id="title">
        </div>
        <span class="input-group-addon">选择图表种类</span>
        <select class="form-control" name="type" id="con_select">
         <option value="zjzb">折线图-直角坐标</option>
         <option value="logx">折线图-x取对数</option>
         <option value="logy">折线图-y取对数</option>
         <option value="logxy">折线图-x、y取对数</option>
         <option value="scatter">散点图</option>
        </select>
        <p class="form-btn">
        <button type="submit" class="btn btn-primary btn-lg " name="submit" onclick="draw()">开始画图</button>
        </p>
        <br>
	</form>
	</div>
	<!--图表生成处-->
	<div class="span9">
		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" >
            {% if src %}
            <img src="../static/tmpimage/{{ src }}" style="padding-left:10%" />
            <hr>
            <div class="res">
            <b>以下为统计量分析（针对y）：</b>
            <p>&nbsp;</p>

            <table class="table table-striped">
                <thead>
                    <tr class="warning">
                        <th>极差</th>
                        <th>均值</th>
                        <th>中位数</th>
                        <th>标准差</th>
                        <th>变异系数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                       <td>{{ jc }}</td>
                        <td>{{ mean_y }}</td>
                        <td>{{ center_y }}</td>
                        <td>{{ std_y }}</td>
                        <td>{{ var }}</td>
                        </tr>
                </tbody>
            </table>
            </div>
            {% endif %}
    </div>

</div>
</div>


<footer>
<div class="container">
    <div class="row">
        <div class="span6 offset3">
            <ul class="social-networks">
                <li><a href="#"><i class="icon-circled icon-bgdark icon-instagram icon-2x"></i></a></li>
                <li><a href="#"><i class="icon-circled icon-bgdark icon-twitter icon-2x"></i></a></li>
                <li><a href="#"><i class="icon-circled icon-bgdark icon-dribbble icon-2x"></i></a></li>
                <li><a href="#"><i class="icon-circled icon-bgdark icon-pinterest icon-2x"></i></a></li>
            </ul>
            <p class="copyright">Copyright &copy;  <a href="/" target="_blank" title="模板之家">sjfx.piclass.cn</a> 
</p>
        </div>
    </div>
</div>
<!-- ./container -->
</footer>
<a href="#" class="scrollup"><i class="icon-angle-up icon-square icon-bgdark icon-2x"></i></a>
<!-- jQuery -->
<script src="../static/js/jquery.js"></script>
<!-- nav -->
<script src="../static/js/jquery.scrollTo.js"></script>
<script src="../static/js/jquery.nav.js"></script>
<!-- localScroll -->
<script src="../static/js/jquery.localscroll-1.2.7-min.js"></script>
<!-- bootstrap -->
<script src="../static/js/bootstrap.js"></script>
<!-- prettyPhoto -->
<script src="../static/js/jquery.prettyPhoto.js"></script>
<!-- Works scripts -->
<script src="../static/js/isotope.js"></script>
<!-- flexslider -->
<script src="../static/js/jquery.flexslider.js"></script>
<!-- inview -->
<script src="../static/js/inview.js"></script>
<!-- animation -->
<script src="../static/js/animate.js"></script>
<!-- twitter -->
<script src="../static/js/jquery.tweet.js"></script>
<!-- contact form -->
<script src="../static/js/validate.js"></script>
<!-- custom functions -->
<script src="../static/js/custom.js"></script>
</body>
</html>